<template>
  <div  class='app-container'>
    <!-- 数据列表 -->
    <div>
      <div class="demo-input-size demo-input search_module">
        <el-form :model="search" ref="search" :inline="true" size="small" label-suffix=":">
          <div class="search_btns">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="searchbtn">搜索</el-button>
              <el-button type="primary" plain icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </div>
          <div class="search_items">
            <el-form-item label="品牌" prop="Name">
              <el-input placeholder="品牌" autocomplete="on" v-model="search.Name" @blur="((e,name)=>{input_text(e)})" ></el-input>
            </el-form-item>
            <el-form-item label="是否代理" prop="IsAgent">
              <el-select v-model="search.IsAgent" placeholder="是否代理" clearable @clear="search.IsAgent = undefined">
                <el-option v-for="dict in YesNo" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="品牌首字母" prop="Letter">
              <el-input placeholder="品牌首字母" autocomplete="on" v-model="search.Letter" maxlength="1"></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <el-form size="small" class="btn_middle" style="padding:0 10px;">
        <el-form-item>
          <!-- <el-button type="primary" plain  @click="adjustment">品牌校正</el-button> -->
          <el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button>
          <el-button type="success" icon="el-icon-unlock" @click="enable">启用</el-button>
          <el-button type="danger" icon="el-icon-lock" @click="disable">停用</el-button>
          <!-- <el-button type="primary" icon="el-icon-upload2" @click="importbrands">导入</el-button> -->
        </el-form-item>
      </el-form>
      <el-table :data="list" border  v-loading="listLoading" :height="tableHeight" @selection-change="handleSelectionChange" class="tablecss">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="品牌名称" align="center" prop="Name">
          <template slot-scope="scope">
            <el-link :underline="false" type="primary" @click="handleDetail(scope.row)" title="详细">{{ scope.row.Name }}</el-link>
          </template>
        </el-table-column>
        <!-- <el-table-column label="品牌名称" align="center" prop="Name" /> -->
        <el-table-column label="中文名称" align="center" prop="CNName" />
        <el-table-column label="英文名称" align="center" prop="ENName" />
        <el-table-column label="简称" align="center" prop="ShortName" />
        <el-table-column label="首字母" align="center" prop="Letter" />
        <el-table-column label="是否代理" align="center" prop="IsAgent">
          <template slot-scope="scope">{{
            scope.row.IsAgent | YesNo
          }}</template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">{{
            scope.row.Status == 200 ? "启用" : "停用"
          }}</template>
        </el-table-column>
        <!-- <el-table-column label="操作" width="380" align="center">
          <template slot-scope="scope">
            <el-row>
              <el-button size="mini" @click="handlePet(scope.$index, scope.row)" title="品牌别名" type="primary" class="row-button">品牌别名</el-button>
              <el-button size="mini" @click="handleAdmin(scope.$index, scope.row)" title="品牌负责人" type="primary" class="row-button">品牌负责人</el-button>
              <el-button size="mini" @click="handleRelation(scope.$index, scope.row)" title="关联品牌" type="primary" class="row-button">关联品牌</el-button>
            </el-row>
            <el-row>
              <el-button size="mini" @click="handleWay(scope.$index, scope.row)" title="外部渠道" type="primary" class="row-button">外部渠道</el-button>
              <el-button size="mini" @click="handleAgent(scope.$index, scope.row)" title="代理信息" type="primary" class="row-button">代理信息</el-button>
              <el-button size="mini" @click="handleUpdate(scope.row)" title="品牌编辑" type="primary" class="row-button">品牌编辑</el-button>
            </el-row>
          </template>
        </el-table-column> -->
      </el-table>
      <div class="pagebox">
        <pagination v-show="total > 0" :total="total" :page.sync="search.pageIndex" :limit.sync="search.pageSize" @pagination="getList" />
      </div>
    </div>
  
    <!-- 用户导入对话框 -->
    <!-- <div>
      <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
        <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :action="upload.url" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip text-center" slot="tip">
            <span>仅允许导入xls、xlsx格式文件。</span>
            <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
          </div>
        </el-upload>
        <div slot="footer" class="dialog-footer">
          <el-button size="medium" @click="upload.open = false">取 消</el-button>
          <el-button type="primary" size="medium" @click="submitFileForm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div> -->
      <!--别名管理-->
      <!-- <el-dialog :title="Petdialog.title" :visible.sync="Petdialog.open" :close-on-click-modal="false" append-to-body>
        <Pet :MainID="BrandID" @close="handleCancel" ref="Pet"></Pet>
      </el-dialog> -->
      <!--关联关系管理-->
      <!-- <el-dialog :title="BrandRelation.title" :visible.sync="BrandRelation.open" :close-on-click-modal="false" append-to-body>
        <Relation :id="BrandID" @close="CancelRelation" ref="Relation"></Relation>
      </el-dialog> -->
      <!--渠道管理-->
      <!-- <el-dialog :title="BrandWay.title" :visible.sync="BrandWay.open" :close-on-click-modal="false">
        <Way :MainID="BrandID" @close="CancelWay" ref="Way"></Way>
      </el-dialog> -->
      <!--代理信息-->
      <!-- <el-dialog :title="BrandAgent.title" :visible.sync="BrandAgent.open" :close-on-click-modal="false" append-to-body width="70%">
        <Agent :id="BrandID" @close="CancelAgent" ref="Agent"></Agent>
      </el-dialog>
      <el-dialog :title="BrandAdmin.title" :visible.sync="BrandAdmin.open" :close-on-click-modal="false" append-to-body>
        <Admin :id="BrandID" @close="CancelAdmin" ref="Admin"></Admin>
      </el-dialog> -->
    </div>
  </div>
</template>
<script>
import { List, Boot, Stop } from '../../api/brand'; //引入api 的接口
// import Pet from '../components/Pet.vue';
// import Way from '../components/Way.vue';
// import { downfile } from '../../api/file';
// import Relation from '../brand/components/BrandRelation.vue';
// import Agent from '../brand/components/BrandAgent.vue';
// import Admin from '../brand/components/BrandAdmin.vue';
export default {
  // components: { Pet, Relation, Way, Agent, Admin },
  data() {
    return {
      list: null,
      BrandID: null,
      formLabelWidth: '120px',
      listLoading: true,
      currentPage4: 1,
      total: 0,
      search: {
        pageIndex: 1,
        pageSize: 20,
        Name: undefined,
        IsAgent: undefined,
        Letter: undefined
      },
      ids: [], // 选中数组
      tableHeight: window.innerHeight - 360, //自适应高度
      YesNo: [
        {
          value: 1,
          label: '是'
        },
        {
          value: 0,
          label: '否'
        }
      ],
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/Product/Brand/Import?tableName=Brand'
      },
      Petdialog: {
        open: false,
        title: '品牌别名维护'
      },
      BrandRelation: {
        title: '关联品牌维护',
        open: false
      },
      BrandWay: {
        title: '外部渠道维护',
        open: false
      },
      BrandAgent: {
        title: '代理信息维护',
        open: false
      },
      BrandAdmin: {
        title: '品牌负责人',
        open: false
      }
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    /** 组件加载完后执行 */
  },
  methods: {
    /** 获取列表 */
    getList() {
      List(this.search).then(res => {
        this.list = res.data.Rows;
        this.total = res.data.Total;
        this.listLoading = false;
      });
    },
    /** 搜索 */
    searchbtn() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$refs['search'].resetFields();
      this.searchbtn();
    },
    /**修改*/
    handleUpdate(row) {
      this.$router.push({ path: 'enter', query: { id: row.ID } });
    },
    /**新增*/
    add() {
      this.$router.push({ path: 'enter' });
    },
    /**明细*/
    handleDetail(row) {
      this.$router.push({ path: 'detail', query: { id: row.ID } });
    },
    adjustment() {
      this.$router.push({ path: 'bulkadjustment' });
    },
    /**启用*/
    enable() {
      if (!this.ids.length >= 1) {
        this.msgError('请选择要操作的数据！');
      } else {
        Boot(this.ids).then(response => {
          if (response.success) {
            this.msgSuccess('操作成功!');
            this.getList();
          } else {
            this.msgError(response.data);
          }
        });
      }
    },
    /**禁用*/
    disable() {
      if (!this.ids.length >= 1) {
        this.msgError('请选择要操作的数据！');
      } else {
        Stop(this.ids).then(response => {
          if (response.success) {
            this.msgSuccess('操作成功!');
            this.getList();
          } else {
            this.msgError(response.data);
          }
        });
      }
    },
    /**导入*/
    importbrands() {
      this.upload.title = '品牌导入';
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      window.open(process.env.VUE_APP_BASE_API + '/Template/品牌导入模板.xlsx', '_self');
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    }, // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, '导入结果', { dangerouslyUseHTMLString: true });
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.ID);
    },
    //别名标签管理
    handlePet(index, row) {
      this.Petdialog.open = !this.Petdialog.open;
      this.$nextTick(() => {
        this.$refs.Pet.getPets(row.Name); // 调用子组件的方法 childClick
      });
    },
    handleCancel() {
      this.Petdialog.open = false;
    },
    //关联品牌管理
    handleRelation(index, row) {
      this.BrandID = row.ID;
      this.BrandRelation.open = true;
      this.$nextTick(() => {
        this.$refs.Relation.openRelationBrand(this.BrandID); // 调用子组件的方法 childClick
      });
    },
    CancelRelation() {
      this.BrandRelation.open = false;
    },
    handleWay(index, row) {
      this.BrandWay.open = true;
      this.$nextTick(() => {
        this.$refs.Way.getWay(row.Name); // 调用子组件的方法 childClick
      });
    },
    CancelWay() {
      this.BrandWay.open = false;
    },
    //代理信息
    handleAgent(index, row) {
      this.BrandID = row.ID;
      this.BrandAgent.open = true;
      this.$nextTick(() => {
        this.$refs.Agent.getAgent(); // 调用子组件的方法 childClick
      });
    },
    CancelAgent() {
      this.BrandAgent.open = false;
    },
    //品牌负责人管理
    handleAdmin(index, row) {
      this.BrandID = row.ID;
      this.BrandAdmin.open = true;
      this.$nextTick(() => {
        this.$refs.Admin.BrandPMLoad(); // 调用子组件的方法 childClick
      });
    },
    CancelAdmin() {
      this.BrandAdmin.open = false;
    }
  },
  filters: {
    YesNo(value) {
      if (value === true) {
        return '是';
      } else if (value === false) {
        return '否';
      }
    }
  }
};
</script>

<style scoped>
.demo-input .el-input,
.el-select {
  width: 180px;
  margin-right: 10px;
}
.demo-input {
  font: 15px Small;
}
.el-left {
  float: right;
}
.row-button {
  width: 74px;
  margin: 5px;
  padding-left: 0;
  padding-right: 0;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
/* .tablehieght{
  width: 100%;
  height:calc(100vh - 350px);
  overflow:auto;
} */
.pagebox{
  text-align: right;
}
.pagebox .pagination-container{
padding: 0 !important;
}
.tablecss{
  cursor: pointer;
}
</style>